<template>
  <div class="housejob">
    <van-nav-bar
      left-text="家政求职"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      :border="false"
    ></van-nav-bar>

    <van-card class="jobsinfo">
      <template #tags>
        <div class="content">
          <div class="contents">
            <div class="contop">
              <van-row type="flex">
                <van-col>
                  <div class="contops"></div>
                </van-col>
                <van-col>
                  <span>做家政</span>
                </van-col>
              </van-row>
            </div>
            <van-form ref="loginForm">
              <van-cell-group>
                <van-field
                  v-model="user.name"
                  label="姓名："
                  placeholder="请输入姓名"
                  :rules="rules.name"
                  required
                  clearable
                ></van-field>
                <!-- 输入手机号，调起手机号键盘 -->
                <van-field
                  v-model="user.tel"
                  type="tel"
                  label="手机号码："
                  placeholder="请输入手机号码："
                  clearable
                  required
                  :rules="rules.tel"
                  maxlength="11"
                ></van-field>

                <van-cell class="wantjob">
                  <span>*意向岗位：</span><br />
                  <van-row type="flex">
                    <div
                      class="jobs"
                      v-for="(item, index) in user.jobinfo"
                      :key="index"
                      @click="post(item)"
                    >
                      <span> {{ item }}</span>
                    </div>
                  </van-row>
                </van-cell>

                <van-cell class="wantjobs">
                  <span>**已获证书：</span><br />
                  <van-row type="flex">
                    <div
                      class="wjobs"
                      v-for="(item, index) in user.certificate"
                      :key="index"
                      @click="posts(item)"
                    >
                      <span> {{ item }}</span>
                    </div>
                  </van-row>
                </van-cell>

                <van-field
                  v-model="user.Nativeplace"
                  type="text"
                  label="籍贯："
                  placeholder="请输入籍贯："
                  clearable
                  required
                  :rules="rules.Nativeplace"
                ></van-field>

                <van-field
                  v-model="user.Residence"
                  type="text"
                  label="现居住地："
                  placeholder="请输入居住地："
                  clearable
                  required
                  :rules="rules.Residence"
                ></van-field>

                <van-field
                  v-model="user.company"
                  type="text"
                  label="意向家政公司："
                  placeholder="请选择家政公司："
                  clearable
                  required
                  @focus="companyshow = true"
                  :rules="rules.Residence"
                  class="company"
                ></van-field>

                <van-field
                  v-model="user.Remarks"
                  type="text"
                  label="备注信息："
                  placeholder="请输入需要备注的信息："
                  clearable
                ></van-field>
              </van-cell-group>
            </van-form>
          </div>
          <van-divider />
        </div>
      </template>
    </van-card>
    <van-button
      class="bottombutton"
      type="primary"
      size="large"
      block
      @click="btnok"
      >提交资料</van-button
    >
    <van-popup
      v-model="companyshow"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-picker
        show-toolbar
        :columns="companysinfo"
        @confirm="onConfirm"
        @cancel="companyshow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { getjob, getcompanys, postapply } from "@/api/user.js";
export default {
  props: {
    showdialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      jobsinfo: [], //岗位数组
      certificates: [], //证书数组
      companyshow: false,
      user: {
        tel: "",
        name: "",
        Nativeplace: "", //籍贯
        Residence: "", //现居住地
        company: "", //公司
        Remarks: "",
        certificate: [],
        jobinfo: []
      },

      companysinfo: [],
      rules: {
        name: [
          {
            required: true,
            messsage: "请填写姓名"
          }
        ],
        tel: [
          {
            required: true,
            messsage: "手机号不能为空"
          },
          {
            required: true,
            pattern: /^1[3|5|7|8]\d{9}$/,
            message: "手机号格式错误"
          }
        ],
        Nativeplace: [
          {
            required: true,
            messsage: "籍贯不能为空"
          }
        ],
        Residence: [
          {
            required: true,
            messsage: "居住地不能为空"
          }
        ]
      }
    };
  },
  created() {
    this.gethousejob();
    this.getcompanys();
  },
  methods: {
    onClickLeft() {
      this.$emit("update:showdialog", false);
    },
    onClickRight() {},
    async gethousejob() {
      const { data } = await getjob();
      this.user.jobinfo = data[0].Mainbusiness;
      this.user.certificate = data[0].certificate;
      console.log(this.user.jobinfo);
    },
    async getcompanys() {
      const { data } = await getcompanys();
      data.forEach(item => this.companysinfo.push(item.name));
      console.log(data);
    },
    post(val) {
      console.log(val);
      const index = this.jobsinfo.indexOf(val);
      console.log(index);
      if (index >= 0) {
        this.jobsinfo.splice(index, 1);
      } else {
        this.jobsinfo.push(val);
      }

      console.log(this.jobsinfo);
    },
    posts(val) {
      const indexs = this.certificates.indexOf(val);
      if (indexs >= 0) {
        this.certificates.splice(indexs, 1);
      } else {
        this.certificates.push(val);
      }
      console.log(this.certificates);
    },
    onConfirm(value) {
      this.user.company = value;
      this.companyshow = false;
    },
    async btnok() {
      await postapply({
        phone: this.user.tel,
        id: this.user.tel,
        name: this.user.name,
        remark: this.user.Remarks,
        add: this.user.Nativeplace,
        detailedaddress: this.user.Residence,
        registcompany: this.user.company,
        certificate: this.user.certificate,
        Mainbusiness: this.user.jobinfo,
        grade: "三星育婴师",
        photo: "//img95.699pic.com/element/40157/3261.png_300.png",
        applytime: "2021-05-07",
        salary: "7000"
      });
      this.$toast.success("提交成功");
      this.$router.push("/employment-record");
    }
  }
};
</script>

<style lang="scss" scoped>
.housejob {
  position: relative;
  height: 1390px;
  width: 750px;
  background-color: rgba(248, 248, 248, 100);
  ::v-deep .van-nav-bar {
    height: 180px;
    background-color: #3f51b5;
    .van-nav-bar__content {
      padding-top: 50px;
    }
    .van-nav-bar__left {
      font-size: 33px;
      .van-icon {
        color: rgba(255, 255, 255, 100);
      }
      .van-nav-bar__text {
        color: rgba(255, 255, 255, 100);
      }
    }
  }
  .jobsinfo {
    height: 1212px;
    width: 704px;
    margin: 0 0 0 24px;
    padding: 0;
    z-index: 10;
    position: absolute;
    background-color: rgba(255, 255, 255, 100);
    bottom: 50px;
    border-radius: 8px 8px 8px 8px;
  }
  .content {
    margin: 0 42px;
    background-color: rgba(248, 248, 248, 100);
    position: absolute;
    z-index: 6;
    .contents {
      background-color: rgba(255, 255, 255, 100);
      border-radius: 8px 8px 8px 8px;
      color: rgba(16, 16, 16, 100);
      text-align: center;
      font-family: Arial;

      .contop {
        height: 110px;
        line-height: 110px;
        color: rgba(16, 16, 16, 100);
        font-size: 28px;
        font-family: PingFangSC-regular;
        font-weight: bold;
        .contops {
          width: 8px;
          height: 28px;
          margin: 43px 20px 0 25px;
          background-color: rgba(63, 81, 181, 100);
        }
      }
      .wantjob {
        color: rgba(16, 16, 16, 100);
        height: 256px;
        .jobs {
          padding: 1px 15px 0 15px;
          border: 2px solid rgba(151, 145, 145, 100);
          border-radius: 28px 28px 28px 28px;
          text-align: center;
          margin-left: 13px;
          margin-top: 28px;
          &:hover {
            border: 2px solid #3f51b5;
          }
          ::v-deep span {
            font-size: 10px;
            &:hover {
              color: #3f51b5;
            }
          }
        }
      }

      .wantjobs {
        color: rgba(16, 16, 16, 100);
        height: 256px;
        .wjobs {
          padding: 1px 15px 0 15px;
          border: 2px solid rgba(151, 145, 145, 100);
          border-radius: 28px 28px 28px 28px;
          text-align: center;
          margin-left: 13px;
          margin-top: 28px;

          span {
            font-size: 10px;
          }
        }
      }
      .companysinfo {
        position: relative;
        .selectcol {
          position: absolute;
          top: 0;
          right: 50px;
          .comselect {
            width: 320px;
            font-size: 13px;
            border: 0;
            outline: none;
            background-color: #fff;
          }
        }
      }
    }
    .van-divider {
      margin: 0;
    }
  }
  .bottombutton {
    background-color: rgba(63, 81, 181, 100);
    font-size: 28px;
    position: absolute;
    z-index: 12;
    bottom: 0;
  }
  .company {
    white-space: nowrap;
  }
}
</style>
